<script setup>
// 消耗提示组件
import baseModel from "@/components/baseModel/baseModel.vue";
import { computed, ref } from "vue";
import request from "@/common/utils/request";

const videoNum = ref(1);
const props = defineProps({
  // 选择的视频数量
  checked_num: {
    type: Number,
    default: 0,
  },
  // 剩余剪辑次数
  splitNum: {
    type: Number,
    default: 0,
  },
  current: {
    type: String,
    default: "",
  },
  consumes: {
    type: String,
    default: "",
  },
  unit: {
    type: String,
    default: "",
  },
  unit_name: {
    type: String,
    default: "",
  },
  current: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["handleOk"]);
const dialog = ref(null);
const showModal = () => {
  dialog.value.showModal();
};
const closeModal = () => {
  dialog.value.closeModal();
};
const handleOk = () => {
  emit("handleOk");
  dialog.value.closeModal();
};

defineExpose({
  showModal,
  closeModal,
});
</script>

<template>
  <div>
    <baseModel ref="dialog">
      <template #title>
        <div>
          <span>确认生成</span>
        </div>
      </template>
      <template #content>
        <div class="content">
          <div>
            <span>
              当前剩余{{ props.unit_name }} {{ props.current }}
              {{ props.unit }}, 本次混剪将消耗<span style="color: red">{{ props.consumes }}</span
              >{{ props.unit }}{{ props.unit_name }}
            </span>
          </div>
        </div>
      </template>
      <template #footer>
        <a-button key="back" @click="closeModal">取消</a-button>
        <a-button key="submit" type="primary" @click="handleOk">确定</a-button>
      </template>
    </baseModel>
  </div>
</template>

<style lang="less" scoped>
.title_box {
  .title {
    font-size: 18px;
    color: #1c1f23;
    font-weight: 600;
  }

  .tips_top {
    font-size: 13px;
    color: #42464e;
  }
}

.content {
}
</style>
